<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'DetailedInfo' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="padding: 0">
    <div style="min-height: 200px;width:100%; text-align: center;padding-top: 50px;padding-bottom: 20px">
      <ion-img style="width: 100px;margin: 0 auto;" [src]="patientInfo.avatar_url || '/assets/img/icondoctor.png'">
      </ion-img>
      <div *ngIf="!patientInfo.nickname">
        <ion-label>{{patientInfo.nickname}}</ion-label>
      </div>
      <div *ngIf="patientInfo.english_name">
        <ion-label>{{patientInfo.english_name}}</ion-label>
      </div>
    </div>
    <div
      style="width: calc(100% - 40px);margin-left:20px;height:60px;border-top: 1px solid grey;border-bottom: 1px solid grey;margin-bottom: 20px;overflow: hidden;">
      <div
        style="float: left;width: calc((100% - 2px) / 3);height: 50px;border-right: 1px solid grey;text-align: center;padding-top: 5px;color: grey">
        {{ 'Sex' | translate }}
        <div style="color: black; margin-top: 5px; font-size: 15px">{{ ['Male', 'Female'][patientInfo.gender - 1] | translate }}</div>
      </div>
      <div
        style="float: right;width: calc((100% - 2px) / 3);height: 50px;text-align: center;padding-top: 5px;color: grey;">
        {{ 'Status' | translate }}
        <div style="color: black; margin-top: 5px; font-size: 15px">{{['Submitted','Accepted','Refused'][orderAccept - 1] | translate}}</div>
      </div>
      <div
        style="float: right;width: calc((100% - 2px) / 3);height: 50px;text-align: center;padding-top: 5px;color: grey;border-right: 1px solid grey">
        {{ 'Birthday' | translate }}
        <div style="color: black; margin-top: 5px; font-size: 15px">{{patientInfo.birthday}}</div>
      </div>
    </div>
    <div class="profiles">
      <ion-item>
        <ion-label position="stacked" color="care">{{ 'AppointTime' | translate }}</ion-label>
        <ion-textarea value="{{orderTime}}" auto-grow='true' readonly></ion-textarea>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'PassportNumber' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{patientInfo.passport}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'PhoneNumber' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{patientInfo.phone}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'Email' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{patientInfo.email}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label position="stacked" color="care">{{ 'MedicalHistory' | translate }}</ion-label>
        <ion-textarea rows="6" value="{{patientInfo.medical_history}}" auto-grow='true' readonly></ion-textarea>
      </ion-item>

      <ion-item>
        <ion-label position="stacked" color="care">{{ 'DiseaseDescription' | translate }}</ion-label>
        <ion-textarea rows="6" value="{{patientInfo.medical_desc}}" auto-grow='true' readonly></ion-textarea>
      </ion-item>
    </div>

    <div style="padding: 10px" class="flex-hor-sb-cnt" *ngIf="orderAccept == 1">
      <ion-button shape="round" expand="full" color="care" style="width: 100%; margin: 0 5px"
        (click)="clickAccept()">{{ 'Accept' | translate }}</ion-button>
      <ion-button shape="round" expand="full" color="danger" style="width: 100%; margin: 0 5px"
        (click)="clickRefuse()">{{ 'Refuse' | translate }}</ion-button>
    </div>

    <div style="padding: 10px" class="flex-hor-sb-cnt" *ngIf="orderAccept === 2 && doctorType === 3">
      <!--<ion-button shape="round" expand="full" color="danger" style="width: 100%; margin: 0 5px"
                  (click)="clickRefuse()">{{ 'Refuse' | translate }}</ion-button>-->
      <ion-button shape="round" expand="full" color="care" style="width: 100%; margin: 0 5px"
                  (click)="onAppointmentFinish()">{{ 'Complete' | translate }}</ion-button>
    </div>
  </div>
</ion-content>
